# Campo de texto / Text input

### Código

```
<text_input></text_input>
```

### Tokens

**Color**

| Class                          | Property         | Color token |
| :----------------------------- | :--------------- | :---------- |
| `.bx--label`                   | text color       | `$text-02`  |
| `.bx--text-input`              | text color       | `$text-01`  |
| `.bx--text-input::placeholder` | text color       | `$text-03`  |
| `.bx--form__helper-text`       | text color       | `$text-02`  |
| `.bx--text-input`              | background-color | `$field-01` |
| `.bx--text-input--light`       | background-color | `$field-02` |
| `.bx--text-input`              | border-bottom    | `$ui-04`    |

| Class                      | Property   | Color token    |
| :------------------------- | :--------- | :------------- |
| `.bx--text-input:focus`    | outline    | `$focus`       |
| `.bx--text-input--invalid` | outline    | `$support-01`  |
| `.bx--form-requirement`    | text color | `$support-01`  |
| `.warning--filled`         | svg        | `$support-01`  |
| `.bx--text-input:disabled` | background | `$disabled-01` |
| `.bx--text-input:disabled` | text color | `$disabled-02` |

**Tipografía**

| Class                    | Type token      |
| :----------------------- | :-------------- |
| `.bx--label`             | `$label-01`     |
| `.bx--text-input`        | `$body-long-01` |
| `.bx--form__helper-text` | `$label-01`     |
| `.bx--form-requirement`  | `$label-01`     |

**Estructura de la caja de texto**

| Class                      | Property                    | Spacing token |
| :------------------------- | :-------------------------- | :------------ |
| `.bx--text-input: default` | height                      | –             |
| `.bx--text-input: sm`      | height                      | –             |
| `.bx--text-input: xl`      | height                      | –             |
| `.bx--label`               | margin-bottom               | `$spacing-03` |
| `.bx--form__helper-text`   | margin-top                  | `$spacing-02` |
| `.bx--text-input`          | padding-left, padding-right | `$spacing-05` |
| `.bx--text-input`          | border-bottom               | –             |
| `.bx--text-input:focus`    | border                      | –             |

**Estructura del área de texto**

| Class                     | Property                    | Spacing token |
| :------------------------ | :-------------------------- | :------------ |
| `.bx--text-area__wrapper` | height                      | –             |
| `.bx--label`              | margin-bottom               | `$spacing-03` |
| `.bx--form__helper-text`  | margin-top                  | `$spacing-02` |
| `.bx--text-area__wrapper` | padding-left, padding-right | `$spacing-05` |
| `.bx--text-area__wrapper` | padding-top, padding-bottom | –             |
| `.bx--text-area__wrapper` | border-bottom               | –             |
| `.bx--text-input:focus`   | border                      | –             |